<template>
  <div class="author-home">
    <!-- 顶部横幅 -->
    <div class="banner">
      <div class="banner-bg"></div> <!-- 渐变背景 -->
      <div class="banner-content">
        <img class="avatar" :src="author.auimage" /> <!-- 头像 -->
        <div class="nickname">{{ author.author }}<span class="emoji">🌸</span></div> <!-- 昵称 -->
        <!-- right-个人信息 -->
        <div class="aud_right">
          <button class="my-home">个人主页</button> <!-- 个人主页按钮 -->
          <!-- 信息 -->
          <div class="stats">
            <div class="stat-item">
              <div class="stat-label">作品总数</div>
              <div class="stat-value">{{ author.booknum }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">累计字数</div>
              <div class="stat-value">{{ author.zinum }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">创作天数</div>
              <div class="stat-value">{{ author.tiannum }}</div>
            </div>
          </div>
         </div>
      </div>
    </div>

    <div class="main-area">
      <!-- 左侧内容 -->
      <div class="main-left">
        <!-- 热门连载 -->
        <div class="card hot-serial">
          <div class="card-title">火热连载</div>
          <div class="serial-content" v-for="(hotBook,index) in hotBook" :key="index">
            <img class="book-cover" :src="hotBook.image" /> <!-- 书封面 -->
            <div class="serial-info">
              <div class="serial-title">{{ hotBook.title }}</div>
              <div class="serial-meta">{{ hotBook.sort }} · 连载 · {{ hotBook.zishu }}字</div>
              <div class="serial-desc">{{ hotBook.contents }}</div>
              <div class="serial-update">
                <span class="update-link">最近更新 {{ hotBook.new }}</span>
                <span class="update-time">{{ hotBook.time }}</span>
                <div class="serial-actions">
                  <button class="detail-btn" @click="$router.push('/BookDetails/'+hotBook.id)">作品详情</button>
                  <div class="add-btn" @click="shujiaDian(hotBook.id)">加入收藏</div>
                </div>
              </div>
              
            </div>
          </div>
        </div>
        <!-- 全部作品 -->
        <div class="card all-works">
          <div class="card-title">全部作品({{ allBooks.length }})</div>
          <div class="works-list">
            <div class="work-item" v-for="(book, idx) in allBooks" :key="idx">
              <div class="work-meta">
                <img src="../assets/image/45458c7b.zcepd8.png" alt="">
                <p class="work-year">{{ book.time }}</p>
              </div>
              <div class="work-xiati">
                <img class="work-cover" :src="book.image" alt="封面" />
                <div class="work-info">
                  <div class="work-title">{{ book.title }}</div>
                  <div class="work-meta2">{{ book.sort }} | {{ book.zishu }}字</div>
                  <div class="work-desc">{{ book.contents }}</div>
                  <div class="work-update">
                    <span class="update-link">最后一章 {{ book.new }}</span>
                    <div class="work-actions">
                      <button class="detail-btn" @click="$router.push('/BookDetails/'+book.id)">作品详情</button>
                      <div class="add-btn" @click="shujiaDian(book.id)">加入收藏</div>
                    </div>
                  </div>
                  
                  <div class="work-badge" v-if="book.badge">{{ book.badge }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="main-right">
        <!-- 大神之光 -->
        <div class="right-card">
          <div class="right-title">大神之光</div>
          <div class="right-star">
            <span class="star-name">该作者尚未拥有大神之光</span>
          </div>
        </div>
        <!-- 定制称号 -->
        <div class="right-card">
          <div class="right-title">定制称号 <span class="right-tip">?</span></div>
          <div class="right-desc">该作者暂未定制粉丝称号</div>
        </div>
        <!-- 广告 -->
          <img @click="tiaozhuan" class="gg12" src="../assets/image/gg12.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'AuthorHome',
  data() {
    return {
      author: {},
      hotBook: {
        cover: require('../assets/image/90.webp'),
        title: '希腊：我就是宙斯！',
        category: '奇幻',
        words: '6.25万',
        desc: '已有单本230万字完本作品，更新稳定，人物有嘴，情感心追读）宙斯是最初，是最终，是天穹的神主。也是最初的创世者，冥界为冥天父，亦是永恒的统治者…',
        latestChapter: '第二十八章 使我们必死',
        updateTime: '2025-06-16 00:02'
      },
      allBooks: [
        {
          year: '2024~2025',
          cover: require('../assets/image/90.webp'),
          title: '秦时明月之政',
          category: '轻小说',
          words: '231.99万',
          desc: '好消息，重生到了秦时明月的世界，男儿的世界。无死契约，无死战的世界。谁能留下多少是凯旋的归途？重生成了嬴儿…',
          latestChapter: '新书已发',
          updateTime: '2025-06-03 14:18',
          badge: '爱阅读得一万张月票'
        },
        {
          year: '2025~2025',
          cover: require('../assets/image/90.webp'),
          title: '希腊：我就是宙斯！',
          category: '奇幻',
          words: '6.25万',
          desc: '已有单本230万字完本作品，更新稳定，人物有嘴，情感心追读）宙斯是最初，是最终，是天穹的神主。也是最初的创世者，冥界为冥天父，亦是永恒的统治者…',
          latestChapter: '第二十八章 使我们必死',
          updateTime: '2025-06-16 00:02',
          badge: '爱阅读得五千个收藏'
        }
      ],
      qrImg: require('../assets/image/90.webp')
    }
  },
  mounted() {
    // 页面加载时请求数据
    this.ajaxData(this.$route.params.name);
  },
  methods:{
    //请求数据获取作者信息
    ajaxData(name){
      axios.post('/api/index/zuozhe', {
        zuozhe:name // 示例作者ID
      }).then(response => {
        console.log('获取作者信息成功:', response.data);
        // 假设返回的数据结构与data中的author一致
        this.author = response.data.xinxi;
        this.hotBook = response.data.lianzai;
        this.allBooks = response.data.wanjie;
      }).catch(error => {
        console.error('获取作者信息失败:', error);
      });
    },
    //跳转
    tiaozhuan(){
      this.$router.push('/perusal');
    },
    //添加收藏
    shujiaDian(id){
      console.log(id);
      if(this.$store.state.dlBoole!==''){
        axios.post('/api/index/shujia',{
          phone:this.$store.state.dlBoole.phone,//用户手机号
          novelid:id,//shu本id
        })
        .then(response => {
          console.log(response.data);
          if(response.data.code == 1){
            this.$message({
              message: '已添加到收藏',
              type: 'success',
              duration:1000
            });
          }else{
            this.$message({
              message: `添加失败，${response.data.msg}`,
              type: 'warning',
              duration:1000
            });
          }
        })
      }else{
        this.$message({
          message: '请先登录',
          type: 'warning',
          duration:1000
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.author-home {
  background: #f7f7fb; // 整体背景
  min-height: 100vh;
  .banner {
    position: relative;
    height: 220px;
    .banner-bg {
      position: absolute;
      left: 0; top: 0; right: 0; bottom: 0;
      background-image: url('../assets/image/337c8462.9ewwm6.jpg');
      background-size: 100% 100%;
      z-index: 1;
    }
    .banner-content {
      position: relative;
      z-index: 2;
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding-top: 3%;
      .avatar {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        border: 4px solid #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        margin-right: 32px;
        background: #fff;
      }
      .nickname {
        font-size: 32px;
        color: #fff;
        font-weight: bold;
        margin-right: 32px;
        .emoji {
          font-size: 22px;
          margin-left: 6px;
        }
      }
      .aud_right{
        display: flex;
        flex-direction: column;
        justify-content: right;
        right: 0;
        position: absolute;
      }
      .stats {
        display: flex;
        align-items: flex-end;
        margin-left: 32px;
        margin-top: 30px;
        .stat-item {
          margin-right: 32px;
          text-align: center;
          .stat-label {
            color: #d1c6f7;
            font-size: 14px;
            margin-bottom: 4px;
          }
          .stat-value {
            color: #fff;
            font-size: 22px;
            font-weight: bold;
          }
        }
      }
      .my-home {
        background: #2d1e4f;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 6px;
        padding: 8px 22px;
        font-size: 15px;
        font-weight: bold;
        margin-left: auto;
        cursor: pointer;
        margin-right: 32px;
        transition: background 0.2s;
        &:hover {
          background: #4b2d7a;
        }
      }
    }
  }
  .main-area {
    display: flex;
    max-width: 1200px;
    margin: 60px auto 0 auto;
    position: relative;
    z-index: 3;
    .main-left {
      flex: 1;
      .card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
        margin-bottom: 24px;
        padding: 0 0 30px 0;
        .card-title {
          font-size: 18px;
          font-weight: bold;
          color: #222;
          padding: 18px 28px 0 28px;
        }
      }
      .hot-serial {
        .serial-content {
          display: flex;
          align-items: flex-start;
          padding: 18px 28px 0 28px;
          .book-cover {
            width: 100px;
            height: 130px;
            border-radius: 5px;
            margin-right: 22px;
            object-fit: cover;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            background: #f2f2f2;
          }
          .serial-info {
            flex: 1;
            .serial-title {
              font-size: 18px;
              font-weight: bold;
              color: #222;
              margin-bottom: 6px;
            }
            .serial-meta {
              font-size: 13px;
              color: #888;
              margin-bottom: 6px;
            }
            .serial-desc {
              font-size: 14px;
              color: #444;
              margin-bottom: 8px;
              line-height: 1.6;
               word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2; /* 超出几行省略 */
              overflow: hidden;
            }
            .serial-update {
              font-size: 13px;
              color: #3498db;
              margin-bottom: 8px;
              display: flex;
              position: relative;
              .update-link {
                color: #3498db;
                margin-right: 10px;
                cursor: pointer;
              }
              .update-time {
                color: #aaa;
              }
            }
            .serial-actions {
              display: flex;
              gap: 10px;
              position: absolute;
              right: 0;
              .detail-btn {
                background: #e94f4f;
                color: #fff;
                border: none;
                border-radius: 4px;
                padding: 6px 18px;
                font-size: 14px;
                cursor: pointer;
                font-weight: 500;
                transition: background 0.2s;
                &:hover { background: #c92c2c; }
              }
              .add-btn {
                background: #fff;
                color: #e94f4f;
                border: 1px solid #e94f4f;
                border-radius: 4px;
                padding: 6px 18px;
                font-size: 14px;
                cursor: pointer;
                font-weight: 500;
                transition: background 0.2s, color 0.2s;
                &:hover { background: #fbeaea; }
              }
            }
          }
        }
      }
      .all-works {
        .works-list {
          padding: 0 28px;
          .work-item {
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #f0f0f0;
            padding: 18px 0 30px 0;
            position: relative;
            &:last-child { border-bottom: none; }
            .work-meta {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              .work-year {
                font-size: 13px;
                color: #888;
                display: flex;
                align-items: center;
              }
              img{
                width: 20px;
                margin-right: 5px;
              }
            }
            .work-xiati{
              display: flex;
              align-items: center;
            }
            .work-cover {
              width: 100px;
              height: 130px;
              border-radius: 6px;
              margin: 0 18px 0 0;
              object-fit: cover;
              background: #f2f2f2;
              box-shadow: 0 1px 4px rgba(0,0,0,0.06);
            }
            .work-info {
              flex: 1;
              min-width: 0;
              .work-title {
                font-size: 16px;
                font-weight: bold;
                color: #222;
                margin-bottom: 10px;
              }
              .work-meta2 {
                font-size: 14px;
                color: #888;
                margin-bottom: 10px;
              }
              .work-desc {
                font-size: 14px;
                color: #666;
                margin-bottom: 10px;
                line-height: 1.5;
                 word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2; /* 超出几行省略 */
              overflow: hidden;
              }
              .work-update {
                font-size: 13px;
                color: #3498db;
                margin-bottom: 6px;
                display: flex;
                position: relative;
                .update-link {
                  color: #3498db;
                  margin-right: 10px;
                  cursor: pointer;
                }
                .update-time {
                  color: #aaa;
                }
              }
              .work-actions {
                display: flex;
                gap: 8px;
                margin-bottom: 4px;
                position: absolute;
                right: 0;
                .detail-btn {
                  background: #e94f4f;
                  color: #fff;
                  border: none;
                  border-radius: 4px;
                  padding: 5px 16px;
                  font-size: 13px;
                  cursor: pointer;
                  font-weight: 500;
                  transition: background 0.2s;
                  &:hover { background: #c92c2c; }
                }
                .add-btn {
                  background: #fff;
                  color: #e94f4f;
                  border: 1px solid #e94f4f;
                  border-radius: 4px;
                  padding: 5px 16px;
                  font-size: 13px;
                  cursor: pointer;
                  font-weight: 500;
                  transition: background 0.2s, color 0.2s;
                  &:hover { background: #fbeaea; }
                }
              }
              .work-badge {
                position: absolute;
                right: 0;
                top: 18px;
                background: #fff0f0;
                color: #e94f4f;
                border-radius: 4px;
                font-size: 12px;
                padding: 2px 10px;
                font-weight: 500;
                border: 1px solid #ffeaea;
              }
            }
          }
        }
      }
    }
    .main-right {
      width: 320px;
      margin-left: 32px;
      .right-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
        margin-bottom: 24px;
        padding: 18px 22px 18px 22px;
        .right-title {
          font-size: 16px;
          font-weight: bold;
          color: #222;
          margin-bottom: 10px;
          .right-link {
            color: #aaa;
            font-size: 13px;
            margin-left: 8px;
            cursor: pointer;
          }
          .right-tip {
            color: #bbb;
            font-size: 13px;
            margin-left: 8px;
            cursor: pointer;
          }
        }
        .right-star {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          .star-icon {
            color: #e9b94f;
            font-size: 22px;
            margin-right: 8px;
          }
          .star-name {
            color: #888;
            font-size: 15px;
          }
        }
        .right-desc {
          font-size: 13px;
          color: #888;
        }
        &.qr-card {
          text-align: center;
          .qr-title {
            color: #e94f4f;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 6px;
          }
          .qr-desc {
            color: #888;
            font-size: 13px;
            margin-bottom: 8px;
          }
          .qr-img {
            width: 120px;
            height: 120px;
            margin: 0 auto 8px auto;
            display: block;
            border-radius: 8px;
            background: #f2f2f2;
          }
          .qr-tip {
            color: #aaa;
            font-size: 12px;
          }
        }
      }
    }
  }
  .gg12{
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
  }
}
</style>
